<template>
    <el-dialog v-model="visible" :width="400" class="dialog-box">
        <template #header> <span class="title"> 提示 </span> </template>
        <div class="hint-box">
            <el-icon class="hint-icon"><WarningFilled /></el-icon>
            <span class="text">{{ hintText }} </span>
        </div>
        <template #footer>
            <span class="btn-box">
                <el-button @click="cancelHandel">取消</el-button>
                <el-button type="primary" @click="submitHandel">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const emit = defineEmits(['submit']);
// 控制弹框的展示
const visible = ref(false);
// 每个按钮的 row 数据
const rowData = ref(null);
// 点击按钮的类行
const btnType = ref<any>(0);
// 提示文案
const hintText = ref('');
// 取消按钮
const cancelHandel = () => {
    visible.value = false;
};
// 确定按钮
const submitHandel = e => {
    visible.value = false;
    emit('submit', rowData.value, btnType.value, e);
};
// 打开弹框
const open = (text: any, row: any, type: number) => {
    hintText.value = text;
    rowData.value = row;
    btnType.value = type;
    visible.value = true;
};
defineExpose({
    open
});
</script>

<style lang="scss" scoped>
.hint-box {
    padding: 24px 21px;
    display: flex;
    align-items: start;
    justify-content: center;

    .hint-icon {
        color: #faad14;
        font-size: 24px;
    }

    .text {
        line-height: 24px;
        margin-left: 8px;
        font-weight: 400;
        color: #33302d;
        font-family: PingFangSC-Regular, 'PingFang SC';
    }
}

.dialog-box {
    .title {
        font-size: 16px;
        font-weight: 500;
    }
}
</style>
